<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<script type="text/javascript" src="/static/vue.js"></script>


<div id="mydiv">
    <table border="1px">
        <tr>
            <th>序号</th>
            <th>昵称</th>
            <th>真实姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>修改</th>
        </tr>
        <tr v-for="(item,index) in userlist">
            <td>{{index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.realName}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.tel}}</td>
            <td>{{item.email}}</td>
        </tr>

    </table>

</div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#mydiv',
        data:{
            userlist:[
                {name:'法外狂徒',
                realName:'张三',
                sex:'男',
                tel:'132110',
                email:'123@163.com'},
                {name:'寒冰射手',
                    realName:'艾希',
                    sex:'女',
                    tel:'132110',
                    email:'666@163.com'},
                {},
                {},
                {},
                {},
            ]
        }
    })
</script>

</html>